<template>
  <div class="header-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">高度设置</el-divider>
      </div>
      <el-form-item label="区域高度">
        <el-input-number
          :min="0"
          size="small"
          v-model="optionsInfo['areaHeight']"
        />
      </el-form-item>
      <template v-if="optionsInfo['layoutConfig']">
        <el-form-item label="左侧诊室框高度">
          <el-input-number
            size="small"
            v-model="optionsInfo.layoutConfig.leftBoxHeight"
          />
        </el-form-item>
        <el-form-item label="右侧行高">
          <el-input-number
            size="small"
            v-model="optionsInfo.layoutConfig.rightRowHeight"
          />
        </el-form-item>
      </template>
      <el-form-item label="视图模式" v-if="optionsInfo?.viewModeState">
        <el-select
          v-model="optionsInfo['viewMode']"
          placeholder="请选择"
          @change="handleChangeView"
        >
          <el-option
            v-for="item in viewModeOPtions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <template v-if="optionsInfo['replenishArea']">
        <div class="title-info">
          <el-divider content-position="left">补充说明设置</el-divider>
        </div>
        <template v-if="optionsInfo['replenishArea']">
          <el-form-item class="replenish-shown" label="补充说明显示">
            <el-switch v-model="optionsInfo.replenishShown" />
          </el-form-item>
          <el-form-item
            class="replenish-shown"
            label="补充说明内容"
            v-if="optionsInfo.replenishShown"
          >
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              v-model="optionsInfo.replenishContent"
              placeholder="请输入内容"
              size="small"
            />
          </el-form-item>
        </template>
      </template>
      <template
        v-if="optionsInfo['roomNumberArea'] && optionsInfo['viewMode'] === 1"
      >
        <div class="title-info">
          <el-divider content-position="left">诊室号设置</el-divider>
        </div>
        <el-form-item class="replenish-shown" label="序号显示">
          <el-switch v-model="optionsInfo['roomNumberShown']" />
        </el-form-item>
        <el-form-item
          v-if="optionsInfo['roomNumberShown']"
          class="replenish-shown"
          label="窗口号文案显示"
        >
          <el-switch v-model="optionsInfo['winNumberShow']" />
        </el-form-item>
        <template v-if="optionsInfo['winNumberShow']">
          <el-form-item class="replenish-shown" label="序号文案">
            <el-input
              v-model="optionsInfo.winNumberTit"
              placeholder="请输入内容"
              size="small"
            />
          </el-form-item>
          <el-form-item class="replenish-shown" label="文案字体大小">
            <el-input-number
              :min="1"
              size="small"
              v-model="optionsInfo['winNumberTitFontSize']"
            />
          </el-form-item>
        </template>
        <template v-if="optionsInfo['roomNumberShown']">
          <el-form-item class="replenish-shown" label="自动获取接口诊室号">
            <el-switch v-model="optionsInfo['roomNumberAuto']" />
            <el-tooltip
              class="item"
              effect="dark"
              content="开关开启获取接口数据。开关关闭获取模板设置数据"
              placement="bottom"
            >
              <el-button>
                <i class="el-icon-warning"></i>
              </el-button>
            </el-tooltip>
          </el-form-item>
          <!--诊室选中字段-->
          <el-form-item
            class="replenish-shown"
            label="窗口类型"
            v-if="getRoomNumberSelected"
          >
            <el-select
              v-model="optionsInfo['roomNoKey']"
              placeholder="请选择"
              :disabled="!optionsInfo['roomNumberAuto']"
            >
              <el-option
                v-for="item in windowOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item class="replenish-shown" label="序号">
            <el-input-number
              :min="1"
              :max="499"
              size="small"
              :disabled="optionsInfo['roomNumberAuto']"
              v-model="optionsInfo['roomNumber']"
            />
          </el-form-item>
          <el-form-item class="replenish-shown" label="序号字号">
            <el-input-number
              :min="1"
              size="small"
              v-model="optionsInfo['roomNumberFontSize']"
            />
          </el-form-item>
          <el-form-item label="序号背景色" class="replenish-shown">
            <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo['roomBackground']"
            />
          </el-form-item>
          <el-form-item label="序号字体颜色" class="replenish-shown">
            <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo['roomNumberColor']"
            />
          </el-form-item>
        </template>
      </template>

      <template v-if="optionsInfo['deptNameArea']">
        <div class="title-info">
          <el-divider content-position="left">科室设置</el-divider>
        </div>
        <!--诊室&窗口显示-->
        <el-form-item label="科室显示" class="replenish-shown">
          <el-switch v-model="optionsInfo['deptNameShown']" />
        </el-form-item>

        <template v-if="optionsInfo['deptNameShown']">
          <el-form-item label="自动获取接口科室" class="replenish-shown">
            <el-switch v-model="optionsInfo['deptNameAuto']" />
            <el-tooltip
              class="item"
              effect="dark"
              content="打开开关获取模板设置的科室名，关闭开关获取接口的科室名"
              placement="bottom"
            >
              <el-button>
                <i class="el-icon-warning"></i>
              </el-button>
            </el-tooltip>
          </el-form-item>

          <!--模板输入科室-->
          <el-form-item class="replenish-shown" label="科室名称">
            <el-input
              size="small"
              placeholder="请输入内容"
              :disabled="optionsInfo['deptNameAuto']"
              v-model="optionsInfo['roomName']"
            />
          </el-form-item>

          <!--诊室选中字段-->
          <template v-if="optionsInfo['deptNameAuto']">
            <DeptNameKeyEditor
              :designer="designer"
              :selected-widget="selectedWidget"
              :option-model="optionModel"
            />
          </template>

          <el-form-item class="replenish-shown" label="诊室名22称字号">
            <el-input-number
              :min="1"
              size="small"
              v-model="optionsInfo['roomNameFontSize']"
            />
          </el-form-item>
        </template>
      </template>

      <template v-if="optionsInfo['roomNameArea']">
        <div class="title-info">
          <el-divider content-position="left">诊室&窗口设置</el-divider>
        </div>

        <!--诊室&窗口显示-->
        <el-form-item label="诊室&窗口显示" class="replenish-shown">
          <el-switch v-model="optionsInfo['roomNameShown']" />
        </el-form-item>
        <el-form-item label="诊室&窗口背景色" class="replenish-shown">
          <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['roomNameBackground']"
          />
        </el-form-item>
        <el-form-item label="诊室&窗口字体颜色" class="replenish-shown">
          <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['roomNameColor']"
          />
        </el-form-item>
        <template v-if="optionsInfo['roomNameShown']">
          <el-form-item label="自动获取接口诊室名" class="replenish-shown">
            <el-switch v-model="optionsInfo['roomNameAuto']" />
            <el-tooltip
              class="item"
              effect="dark"
              content="打开开关获取模板设置的诊室名，关闭开关获取接口的诊室名"
              placement="bottom"
            >
              <el-button>
                <i class="el-icon-warning"></i>
              </el-button>
            </el-tooltip>
          </el-form-item>

          <!--模板输入科室-->
          <el-form-item class="replenish-shown" label="诊室名称">
            <el-input
              :disabled="optionsInfo['roomNameAuto']"
              v-model="optionsInfo['roomName']"
              placeholder="请输入内容"
              size="small"
            />
          </el-form-item>

          <!--诊室选中字段-->
          <template v-if="optionsInfo['roomNameAuto']">
            <roomNameKeyEditor
              :designer="designer"
              :selected-widget="selectedWidget"
              :option-model="optionModel"
            />
          </template>

          <el-form-item class="replenish-shown" label="诊室名称字号">
            <el-input-number
              :min="1"
              size="small"
              v-model="optionsInfo['roomNameFontSize']"
            />
          </el-form-item>
        </template>
      </template>

      <template v-if="optionsInfo['currentPatientArea']">
        <div class="title-info">
          <el-divider content-position="left">正在就诊标题</el-divider>
        </div>

        <el-form-item class="replenish-shown" label="正在就诊标题字号">
          <el-input-number
            :min="1"
            size="small"
            v-model="optionsInfo['currentPatientTitleFontSize']"
          />
        </el-form-item>
        <el-form-item label="正在就诊标题颜色" class="replenish-shown">
          <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['currentPatientTitleColor']"
          />
        </el-form-item>
        <el-form-item label="正在就诊背景色" class="replenish-shown">
          <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['currentPatientConnectBackground']"
          />
        </el-form-item>
      </template>

      <template v-if="optionsInfo['currentPatientArea']">
        <div class="title-info">
          <el-divider content-position="left">正在就诊内容</el-divider>
        </div>
        <el-form-item class="replenish-shown" label="正在就诊内容字号">
          <el-input-number
            :min="1"
            size="small"
            v-model="optionsInfo['currentPatientConnectFontSize']"
          />
        </el-form-item>
        <el-form-item label="正在就诊内容颜色" class="replenish-shown">
          <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['currentPatientConnectColor']"
          />
        </el-form-item>

        <el-form-item label="正在就诊内容换行" class="replenish-shown">
          <el-switch v-model="optionsInfo['currentPatientConnectWrap']" />
        </el-form-item>
      </template>

      <template v-if="optionsInfo['patientListArea']">
        <div class="title-info">
          <el-divider content-position="left">待诊标题设置</el-divider>
        </div>
        <el-form-item label="标题内容" class="replenish-shown">
          <el-input
            v-model="optionsInfo['patientListTitle']"
            placeholder="请输入内容"
            size="small"
          />
        </el-form-item>
        <el-form-item label="字体大小" class="replenish-shown">
          <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo['patientListTitleFontSize']"
          />
        </el-form-item>
        <el-form-item label="粗细设置" class="replenish-shown">
          <el-select
            v-model="optionsInfo['patientListTitletFontWeight']"
            placeholder="请选择"
          >
            <el-option
              v-for="item in fontWeightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字体颜色">
          <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['patientListTitleFontColor']"
          />
        </el-form-item>
        <el-form-item
          label="背景颜色"
          v-if="optionsInfo['patientListTitleBackground']"
        >
          <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['patientListTitleBackground']"
          />
        </el-form-item>
        <el-form-item label="边框显示">
          <el-switch v-model="optionsInfo['borderShown']" />
        </el-form-item>
        <template v-if="optionsInfo['borderShown']">
          <el-form-item label="边框样式" class="">
            <el-select
              v-model="optionsInfo['borderClass']"
              placeholder="请选择"
            >
              <el-option label="样式一" value="right-title-border-1">
              </el-option>
            </el-select>
          </el-form-item>
        </template>

        <div class="title-info">
          <el-divider content-position="left">待诊列表设置</el-divider>
        </div>
        <el-form-item label="背景颜色">
          <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['patientListBackground']"
          />
        </el-form-item>
        <el-form-item label="阴影显示">
          <el-switch v-model="optionsInfo['shadowShown']" />
        </el-form-item>
        <template v-if="optionsInfo['shadowShown']">
          <el-form-item label="阴影样式" class="">
            <el-select
              v-model="optionsInfo['shadowClass']"
              placeholder="请选择"
            >
              <el-option label="样式一" value="box-shadow-1"> </el-option>
            </el-select>
          </el-form-item>
        </template>
        <el-form-item label="列表行" class="replenish-shown" v-if="false">
          <el-input-number
            size="small"
            :min="optionsInfo['minRow'] || 3"
            :max="99"
            @change="handleTotal"
            v-model="optionsInfo['patientListRow']"
          />
        </el-form-item>
        <el-form-item label="列表列" class="replenish-shown">
          <el-input-number
            :min="3"
            :max="5"
            size="small"
            @change="handleTotal"
            v-model="optionsInfo['patientListCol']"
          />
        </el-form-item>

        <el-form-item label="字号" class="replenish-shown">
          <el-input-number
            :min="30"
            size="small"
            v-model="optionsInfo['patientListFontSize']"
          />
        </el-form-item>

        <!--粗细-->
        <el-form-item label="粗细设置" class="replenish-shown">
          <el-select
            v-model="optionsInfo['patientListFontWeight']"
            placeholder="请选择"
          >
            <el-option
              v-for="item in fontWeightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="患者字体颜色">
          <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['patientFontColor']"
          />
        </el-form-item>
        <el-form-item label="患者号显示">
          <el-switch v-model="optionsInfo['patientOrderNoShown']" />
        </el-form-item>

        <template v-if="optionsInfo['patientOrderNoShown']">
          <el-form-item label="患者号字体颜色">
            <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo['patientOrderFontColor']"
            />
          </el-form-item>
        </template>
      </template>

      <template v-if="optionsInfo['currentPatientListArea']">
        <div class="title-info">
          <el-divider content-position="left">就诊标题设置</el-divider>
        </div>
        <el-form-item label="标题内容" class="replenish-shown">
          <el-input
            size="small"
            placeholder="请输入内容"
            v-model="optionsInfo['currentPatientListTitle']"
          />
        </el-form-item>
        <el-form-item label="字体大小" class="replenish-shown">
          <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo['currentPatientListTitleFontSize']"
          />
        </el-form-item>
        <el-form-item label="粗细设置" class="replenish-shown">
          <el-select
            v-model="optionsInfo['currentPatientListTitleFontWeight']"
            placeholder="请选择"
          >
            <el-option
              v-for="item in fontWeightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <div class="title-info">
          <el-divider content-position="left">就诊患者设置</el-divider>
        </div>
        <el-form-item label="字体大小" class="replenish-shown">
          <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo['currentPatientListFontSize']"
          />
        </el-form-item>
        <el-form-item label="粗细设置" class="replenish-shown">
          <el-select
            v-model="optionsInfo['currentPatientListFontWeight']"
            placeholder="请选择"
          >
            <el-option
              v-for="item in fontWeightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </template>

      <template v-if="optionsInfo['scrollArea']">
        <div class="title-info">
          <el-divider content-position="left">患者滚动设置</el-divider>
          <el-form-item label="是否滚动">
            <el-switch v-model="optionsInfo['scroll']" />
          </el-form-item>

          <el-form-item label="视图首屏数量" class="replenish-shown">
            <el-input-number
              v-model="optionsInfo.viewNumber"
              :min="optionsInfo.viewMinNumber || 3"
              :max="optionsInfo.viewManNumber || 3"
              size="small"
              class="hide-spin-button"
            />
          </el-form-item>

          <el-form-item label="滚动速度">
            <el-input-number
              v-model="optionsInfo['scrollStep']"
              :min="1"
              :max="6"
              size="small"
              class="hide-spin-button"
              :disabled="!optionsInfo['scroll']"
            />
          </el-form-item>

          <template v-if="false">
            <el-form-item label="就诊的人数">
              <el-input-number
                v-model="optionsInfo['scrollSliceNumber']"
                :min="1"
                :max="99"
                size="small"
                class="hide-spin-button"
              />
            </el-form-item>
            <el-form-item label="开启滚动的人数">
              <el-input-number
                v-model="optionsInfo['scrollNumber']"
                :min="3"
                :max="99"
                size="small"
                class="hide-spin-button"
                :disabled="!optionsInfo['scroll']"
              />
            </el-form-item>
          </template>
        </div>
      </template>

      <!--接口设置-->
      <template v-if="optionsInfo?.widgetSign === 'winPatient'">
        <div class="title-info">
          <el-divider content-position="left">接口配置</el-divider>
        </div>
        <el-form-item label="接口状态" class="replenish-shown">
          <el-switch v-model="optionsInfo['ApiState']" />
        </el-form-item>
        <template v-if="optionsInfo['ApiState']">
          <div class="list-item-setting">
            <template v-if="optionsInfo['ApiState']">
              <el-form-item label="接口类型" class="replenish-shown">
                <el-select
                  v-model="optionsInfo['ApiType']"
                  placeholder="请选择"
                  size="small"
                >
                  <el-option
                    v-for="item in ApiTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item
                label="接口地址"
                class="replenish-shown"
                v-if="optionsInfo['ApiType'] === 1"
              >
                <el-input
                  v-model="optionsInfo['ApiAddress']"
                  size="small"
                  placeholder="请输入内容"
                />
              </el-form-item>

              <el-form-item
                label="接口标识"
                v-if="optionsInfo['ApiType'] === 2"
                class="replenish-shown"
              >
                <el-input
                  v-model="optionsInfo['ApiSign']"
                  size="small"
                  placeholder="请输入内容"
                />
              </el-form-item>

              <el-form-item label="接口请求方式" class="replenish-shown">
                <el-select
                  v-model="optionsInfo['rqMethod']"
                  placeholder="请选择"
                  size="small"
                >
                  <el-option
                    v-for="item in apiMethodOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <!--接口请求频次-->
              <el-form-item label="请求频次(s)" class="replenish-shown">
                <el-input-number
                  :min="5"
                  size="small"
                  v-model="optionsInfo['frequencyApi']"
                />
              </el-form-item>
              <!--是否开启无感刷新-->
              <el-form-item label="开启无感刷新" class="replenish-shown">
                <el-switch v-model="optionsInfo['backstageRefresh']" />
              </el-form-item>
            </template>
          </div>
        </template>
        <div class="title-info">
          <el-divider content-position="left">映射关系设置</el-divider>
        </div>
        <el-form-item label="是否开启映射关系" class="replenish-shown">
          <el-switch v-model="optionsInfo['mappingState']" />
        </el-form-item>
        <template v-if="optionsInfo['mappingState']">
          <div class="list-item-setting" v-if="optionsInfo['mappingState']">
            <div v-for="(item, index) in mapData" :key="index">
              <el-form-item :label="`数据源Bean`" class="replenish-shown">
                <el-input
                  v-model="item.beanName"
                  size="small"
                  :placeholder="`请输入数据源Bean`"
                  :disabled="
                    item.beanName === 'patientName' ||
                    item.beanName === 'orderNo'
                  "
                />
              </el-form-item>
              <el-form-item :label="`数据源Source`" class="replenish-shown">
                <el-input
                  v-model="item.sourceName"
                  size="small"
                  :placeholder="`请输入数据源Source`"
                />
              </el-form-item>
            </div>
          </div>
        </template>
      </template>

      <!--正在就诊-->
      <template v-if="optionsInfo['viewMode']">
        <div class="list-item-setting" v-if="optionsInfo['currentPatientArea']">
          <div class="title-info">
            <el-divider content-position="left">就诊设置</el-divider>
          </div>
          <el-form-item class="replenish-shown" label="就诊标题">
            <el-input
              v-model="optionsInfo['currentPatientTitle']"
              placeholder="请输入内容"
              size="small"
            />
          </el-form-item>
        </div>

        <!--候诊等待-->
        <div class="list-item-setting" v-if="optionsInfo['waitingPatientArea']">
          <div class="title-info">
            <el-divider content-position="left">候诊设置</el-divider>
          </div>
          <el-form-item class="replenish-shown" label="候诊标题">
            <el-input
              v-model="optionsInfo['waitingPatientTitle']"
              placeholder="请输入内容"
              size="small"
            />
          </el-form-item>
        </div>
      </template>

      <template v-if="optionsInfo['layerArea']">
        <div class="list-item-setting">
          <div class="title-info">
            <el-divider content-position="left">弹层信息</el-divider>
          </div>
          <el-select
            v-model="optionsInfo['layerNameKey']"
            placeholder="请选择"
            size="medium"
          >
            <el-option
              v-for="item in layerOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        
        <div
          class="setting"
          v-if="optionsInfo['layerNameKey'] === 'call-patient-blood'"
        >
          <el-divider content-position="left">呼叫患者弹层显示</el-divider>
          <el-form-item label="设置显示" class="wait-patient-set">
            <el-radio-group v-model="optionsInfo.checkList">
              <el-radio
                :label="item.value"
                v-for="item in callPatientOptions"
                :key="item.value"
              >
                <template>
                  {{ item.label }}
                  <el-tooltip
                    class="item"
                    effect="dark"
                    placement="bottom"
                    content="当是叫号器登陆的时候，该属性生效"
                    v-if="item.value == 4"
                  >
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </template>
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="显示内容"
            class="column-area"
            v-if="optionsInfo.checkList === 5"
          >
            <el-input
              class="hide-spin-button"
              v-model="optionsInfo.layerInfo.current.content"
            />
          </el-form-item>
          <el-divider content-position="left">弹层顶部设置</el-divider>
          <el-form-item label="背景色" class="column-area">
            <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo['layerInfo']['current'].backgroundColor"
            />
          </el-form-item>
          <el-form-item label="字体颜色" class="column-area">
            <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo['layerInfo']['current'].color"
            />
          </el-form-item>

          <el-form-item label="字体大小" class="column-area">
            <el-input-number
              :min="14"
              size="small"
              class="hide-spin-button"
              v-model="optionsInfo['layerInfo']['current'].fontSize"
            />
          </el-form-item>
          <el-divider content-position="left">患者区域设置</el-divider>
          <el-form-item label="背景色" class="column-area">
            <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="
                optionsInfo['layerInfo']['current'].patientNumberBackground
              "
            />
          </el-form-item>
          <el-form-item label="顶部字体颜色" class="column-area">
            <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo['layerInfo']['current'].patientColor"
            />
          </el-form-item>

          <el-form-item label="顶部字体大小" class="column-area">
            <el-input-number
              :min="14"
              size="small"
              class="hide-spin-button"
              v-model="optionsInfo['layerInfo']['current'].patientFontSize"
            />
          </el-form-item>
        </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import roomNameKeyEditor from "../basicInfo/roomNameKey-editor.vue";
import DeptNameKeyEditor from "../basicInfo/deptNameKey-editor.vue";
import * as types from "@c/public/form-designer/devType/datas-types";
import Template from "@sc/template/index.vue";

export default {
  name: "windowConfig3-editor",
  componentName: "windowConfig3-editor",
  mixins: [],
  components: { Template, roomNameKeyEditor, DeptNameKeyEditor },
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  inject: ["serverFieldList", "getDesignerConfig"],

  data() {
    return {
      optionsInfo: Object(),
      mapData: [],
      predefineColors: types["predefineColors"],
      fontWeightOptions: types["fontWeightOptions"],
      windowOptions: [
        {
          value: "deptName",
          label: "科室名称",
        },
        {
          value: "deptShortName",
          label: "科室简称",
        },
        {
          value: "roomName",
          label: "诊室名称",
        },
        {
          value: "roomShortName",
          label: "诊室简称",
        },
        {
          value: "roomNo",
          label: "诊室号",
        },
      ],
      layerOptions: [
        {
          value: "call-patient-blood",
          label: "弹层一",
        },
        {
          value: "call-patient",
          label: "通用弹层",
        },
        {
          value: "call-patient-original-biz",
          label: "业务弹层",
        },
      ],
      viewModeOPtions: [
        {
          value: 1,
          label: "视图一",
        },
        {
          value: 2,
          label: "视图二",
        },
      ],
      callPatientOptions: [
        {
          value: 1,
          label: "科室",
        },
        {
          value: 2,
          label: "号别",
        },
        {
          value: 3,
          label: "诊室",
        },
        {
          value: 4,
          label: "医生工作站",
        },
        {
          value: 5,
          label: "自定义",
        },
      ],
      ApiTypeOptions: [
        {
          value: 1,
          label: "接口地址",
        },
        {
          value: 2,
          label: "接口标识",
        },
      ],
      apiMethodOptions: [
        {
          value: 1,
          label: "GET",
        },
        {
          value: 2,
          label: "POST",
        },
      ],
    };
  },

  computed: {
    getRoomNumberSelected() {
      let { roomNumberSelected = true } = this.optionsInfo;
      return roomNumberSelected;
    },
  },

  mounted() {
    this.mapBeanData();
  },

  methods: {
    handleChangeView(val) {
      switch (val) {
        case 1:
          Reflect.set(this.optionsInfo, "roomNameFontSize", 150);
          break;
        case 2:
          Reflect.set(this.optionsInfo, "roomNameFontSize", 320);
          break;
      }
    },

    // 计算候诊患者
    handleTotal() {
      let { patientListRow = 5, patientListCol = 3 } = this.optionsInfo;
      this.optionsInfo.waitPatientNumber = patientListRow * patientListCol;
    },

    mapBeanData() {
      let { beanData } = this.optionsInfo;
      let data = [...beanData];
      this.mapData = data.map((item) => ({
        beanName: item.beanName,
        sourceName: item.sourceName,
      }));
    },
  },

  watch: {
    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        let key = val.config;
        this.optionsInfo = val[key];
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>


<style lang="scss" scoped>
.replenish-shown {
  display: flex;
  flex-direction: column;

  :deep(label) {
    width: 100% !important;
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;
    display: flex;
    flex-direction: row;
    flex-grow: 1;

    .el-input-number {
      flex-shrink: 1;
      width: 150px;
    }

    .el-button {
      color: #e58602;
      font-size: 18px;
      flex-shrink: 0;
      padding: 0 15px;
      border-color: transparent !important;
      background: transparent !important;
    }
  }
}
</style>
